<template>
  <div class='dashboard'>
    <el-card>
      <el-row :gutter='20'>
        <el-col :xl='16' :lg='24' :md='24' :sm='24' :xs='24'>
          <div class='serach'>
            <el-select v-model='stationValue' placeholder='请选择站点' filterable @change='comprehensive'>
              <el-option
                v-for='item in selectOptions'
                :key='item.id'
                :label='item.name'
                :value='item.id'
              />
            </el-select>
          </div>

          <!--站点概况  运行状态-->
          <div class='total-data'>
            <TotalData :basic-info='basicInfo' />
          </div>

          <!--运行图表-->
          <div class='chart'>
            <Chart :chat='chat' />
          </div>

        </el-col>
        <el-col :xl='8' :lg='24' :md='24' :sm='24' :xs='24'>
          <!--用电情况-->
          <div class='electricity'>
            <Electricity :ele='ele' />
          </div>
          <!--最近报警-->
          <div class='alarm'>
            <Alarm :table-data='table' />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import TotalData from '@/views/dashboard/component/TotalData'
import Chart from '@/views/dashboard/component/Chart'
import Electricity from '@/views/dashboard/component/Electricity'
import Alarm from '@/views/dashboard/component/Alarm'
import { stationAllList } from '@/api/fileManage'
import { comprehensiveIndex } from '@/api'

export default {
  name: 'Dashboard',
  components: {
    TotalData,
    Chart,
    Electricity,
    Alarm,
  },
  data() {
    return {
      selectOptions: [],
      stationValue: '',
      // 站点概况  运行状态
      basicInfo: {},
      // 运行图表
      chat: [],
      // 用电情况
      ele: {},
      // 最近报警
      table: [],
    }
  },
  mounted() {
    this.getStation()
  },
  methods: {
    /**
     * @description: 获取站点
     * @author: qyc
     */
    getStation() {
      stationAllList().then((res) => {
        this.selectOptions = res.data.data
        this.stationValue = this.selectOptions[0].id
        this.comprehensive()
      })
    },

    /**
     * @description: 综合数据
     * @author: qyc
     */
    comprehensive() {
      comprehensiveIndex({ station_id: this.stationValue }).then(res => {
        this.basicInfo = res.data.basicInfo
        this.chat = res.data.chat
        this.ele = res.data.ele
        this.table = res.data.table
      })
    },
  },

}

</script>

<style lang='scss' scoped>
.dashboard {
  //width: 100%;
  //min-height: 100%;
  //box-sizing: border-box;
  //padding: 0px !important;
  //background: #FFFFFF !important;
  //border-left: 0px !important;

  .serach {
    margin-left: 15px;
  }

  .electricity {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    margin-bottom: 25px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(1, 43, 82, 0.1);
    border-radius: 8px;
  }

  .alarm {
    width: 100%;
    height: 530px;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(1, 43, 82, 0.1);
    border-radius: 8px;
  }

  .total-data {
    width: 100%;
    height: 300px;
    margin-top: 20px;
  }

  .chart {
    width: 100%;
    height: 480px;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0 15px;
    margin-bottom: 10px;
  }
}
</style>
